<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF - 8">
    <title>Google Icon</title>
    <style>
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

        
     .google-icon {
            width: 50vw;
            height: auto;
            display: flex;
            justify-content: flex - start;
            align-items: center;
        }

        
     .google-icon::before {
            content: "G";
            font-family: Arial, sans-serif;
            font-size: 24vw;
            color: #4285F4;
            margin-right: 0.5vw;
        }

        
     .google-letter-container {
            display: flex;
        }

        
     .google-letter-container span {
            font-family: Arial, sans - serif;
            font-size: 24vw;
            margin-right: 0.5vw;
        }

        
     .google-letter-container span:first-of-type {
            color: #DB4437;
        }

        
     .google-letter-container span:nth-of-type(2) {
            color: #F4B400;
        }

        
     .google-letter-container span:nth-of-type(3) {
            color: #4285F4;
        }

        
     .google-letter-container span:nth-of-type(4) {
            color: #0F9D58;
        }

        
     .google-letter-container span:nth-of-type(5) {
            color: #DB4437;
        }
    </style>
</head>

<body>
    <div class="google-icon">
        <div class="google-letter-container">
            <span>o</span>
            <span>o</span>
            <span>g</span>
            <span>l</span>
            <span>e</span>
        </div>
    </div>
</body>

</html>